<template>
  <div class="audit-root">
    <ViewHead></ViewHead>
    <div class="root-content">
      <el-scrollbar ref="listscrollbar" style="height:100%">
        <div class="query-menu yj" :class="isFixedTop && 'query-menu-fixed-top-team'">
          <div class="divline" style="width: 150px">
            <el-input placeholder="设备名称" v-model="query.deviceName" clearable size="mini"></el-input>
          </div>
          <div class="divline" style="width: 150px">
            <el-input placeholder="设备地址" v-model="query.ip" clearable size="mini"></el-input>
          </div>
          <div class="divline" style="width: 150px">
            <el-input placeholder="用户名称" v-model="query.username" clearable size="mini"></el-input>
          </div>
          <div class="divline">
            <el-date-picker size="mini" v-model="query.time" type="daterange" range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div class="divline" style="width:100px;">
            <el-button @click="onQuery" icon="el-icon-search" size="mini">查 询</el-button>
          </div>
        </div>

        <div class="audit-root-list" v-infinite-scroll="onLoadList" infinite-scroll-distance="100">
          <AuditVideoItem v-for="item in list" :key="item.id" :data="item" :onDelP="onDelP"></AuditVideoItem>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import ViewHead from "~/base/ViewHead.vue";
import AuditVideoItem from "./AuditVideoItem";

export default {
  name: "Audit",
  components: {
    ViewHead,
    AuditVideoItem,
  },
  data() {
    return {
      isFixedTop: false,
      list: [],
      query: {
        time: {},
        deviceName: "",
        ip: "",
        username: "",
      },
      offset: 0,
      size: 20,
      skipQuery: false,
      querying: false,
    };
  },
  methods: {
    onDelP(id) {
      for (let i = 0; i < this.list.length; i++) {
        const element = this.list[i];
        if (element.id === id) {
          this.list.splice(i, 1);
          this.offset -= 1;
          break;
        }
      }
    },
    existById(id) {
      for (let i = 0; i < this.list.length; i++) {
        const element = this.list[i];
        if (element.id === id) {
          return true;
        }
      }

      return false;
    },
    onQuery() {
      this.skipQuery = false;
      this.querying = false;
      this.offset = 0;
      this.list = [];
      this.onLoadList();
    },
    makeTime() {
      if (!this.query.time || this.query.time.length != 2) {
        return {
          stime: "",
          etime: "",
        };
      }

      return {
        stime:
          this.$moment(this.query.time[0]).format("YYYY-MM-DD") + " 00:00:00",
        etime:
          this.$moment(this.query.time[1]).format("YYYY-MM-DD") + " 23:59:59",
      };
    },
    onLoadList() {
      if (!this.config.rights.browser_audit_video_list) {
        return;
      }
      if (this.skipQuery) {
        return;
      }
      if (this.querying) {
        return;
      }
      this.querying = true;
      const query = {
        ip: this.query.ip,
        deviceName: this.query.deviceName,
        username: this.query.username,
        ...this.makeTime(),
        offset: this.offset,
        size: this.size,
      };

      this.utils.http("get", "/webapi/auditvideo/list/get", query, (resp) => {
        this.querying = false;
        if (resp.length < this.size) {
          this.skipQuery = true;
        }

        for (const item of resp) {
          if (this.existById(item.id)) {
            continue;
          }
          this.offset += 1;
          this.list.push(item);
        }
      });
    },
  },
  mounted() {
    this.utils.refreshRootContentHeight();

    this.utils.on(this._uid, "refresh_height", () => {
      this.utils.refreshRootContentHeight();
      this.$nextTick(() => {
        this.$refs.listscrollbar.update();
      });
    });

    let scrollbarEl = this.$refs.listscrollbar.wrap;
    scrollbarEl.onscroll = () => {
      if (scrollbarEl.scrollTop > 0) {
        this.isFixedTop = true;
      } else {
        this.isFixedTop = false;
      }
    };
  },
  destroyed() {
    this.utils.unon(this._uid, "refresh_height");
  },
};
</script>

<style>
.audit-root .el-scrollbar__wrap {
  overflow-x: hidden;
}

.audit-root .query-menu {
  padding: 10px;
  background-color: #ffffff;
}

.audit-root .query-menu-fixed-top-team {
  position: fixed;
  background-color: #71b1f3;
  right: 5px;
  z-index: 10;
  padding: 10px;
}

.audit-root .audit-root-list {
  padding-top: 5px;
}
</style>